<template>
  <div class="factory-min-container" >
    <SideMenu />
    <div class="factory-min-right-main">
      <div class="factory-min-right-main-header">
        <div>DT采集点: <span>30</span></div>
        <div>FTY采集点: <span>30</span></div>
        <div>线体数量: <span>3个</span></div>
        <div>工单数量: <span>3个</span></div>
        <div>安灯呼叫次数: <span>30</span></div>
        <div>DT录入次数: <span>21次</span></div>
        <div>FTY录入次数: <span>21次</span></div>
      </div>
      <div class="factory-min-right-main-body">
        <div class="factory-min-right-main-body-item" style="margin-bottom: 10px;">
          <PillarLineEchartsCmp class="pillar-line-cmp" title="小型产出达成率" subTitle="达成率" style="margin-right: 10px;" :config="pillarLineCmpConfig1" :background-url="backgroundUrl1" :key="pKey1" />
          <PillarLineEchartsCmp class="pillar-line-cmp"  title="小型计划外DT损失率" style="margin-left: 10px;" :config="pillarLineCmpConfig2" :background-url="backgroundUrl2" :key="pKey2" />
        </div>
        <div class="factory-min-right-main-body-item" style="margin-top: 10px;">
          <PillarLineEchartsCmp class="pillar-line-cmp"  title="小型任务令准时达成率" subTitle="达成率" style="margin-right: 10px;" :config="pillarLineCmpConfig3" :background-url="backgroundUrl3" :key="pKey3" />
          <PillarLineEchartsCmp class="pillar-line-cmp"  title="小型产品线FTY达成状况" style="margin-left: 10px;" :config="pillarLineCmpConfig4" :background-url="backgroundUrl4" :key="pKey4" />
        </div>     
      </div>
    </div>
    
  </div>
</template>

<script>
import SideMenu from '../components/factory/SideMenu.vue';
import PillarLineEchartsCmp from '../components/factory/PillarLineEchartsCmp.vue';
export default {
  name: 'factoryMin',
  data() {
    return {
      backgroundUrl1: '',//`url("${require('../assets/factory-min-1.png')}")`,
      backgroundUrl2: '',//`url("${require('../assets/factory-min-2.png')}")`,
      backgroundUrl3: '',//`url("${require('../assets/factory-min-3.png')}")`,
      backgroundUrl4: '',//`url("${require('../assets/factory-min-4.png')}")`,
      pillarLineCmpConfig1: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#FFF'
            }
          }
        },
        axisPointer: {
          label: {
            backgroundColor: '#314763',
          }
        },
        grid: {
          top: '30px',
          left: '10px',
          right: '10px',
          bottom: '12px',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              color: '#FFF'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFF',
              }
            },
            axisTick: {
              show: false,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 150,
            interval: 50,
            axisLabel: {
              color: '#FFF',
              formatter: '{value} %'
            },
            // 坐标轴分割线
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FFF',
              }
            }
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              80, 90, 50, 70, 55, 76, 80
            ],
            itemStyle: {
              color: '#00E5FF',
            },
            barMaxWidth: '20%',
            showBackground: true,
          },
          {
            name: '达成率',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [63.00, 95.00, 75.00, 80.00, 85.30, 40.60, 98.90],
            itemStyle: {
              color: '#009ADF'
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
        ]
      },
      pillarLineCmpConfig2: {
        legend: {
          top: 'bottom',
          data: [
            {name: '1月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '2月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '3月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '4月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '5月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
            {name: '6月',icon: 'circle',textStyle:{color:'#FFFFFF'}},
          ],
        },
        tooltip: {
          trigger: 'item',
          formatter: '【{b}：{c}%】',
          position: function (point, params, dom, rect, size) {
              //  size为当前窗口大小
              if ((size.viewSize[0] / 2) >= point[0]) {
                  //其中point为当前鼠标的位置
                  return [point[0] + 50, '10%'];
              } else {
                  //其中point为当前鼠标的位置
                  return [point[0] - 200, '10%'];
              }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: [25, 125],
            center: ['50%', '45%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '1月' , itemStyle: {color: '#00E5FF'} },
              { value: 38, name: '2月' , itemStyle: {color: '#22FFF0'} },
              { value: 32, name: '3月' , itemStyle: {color: '#44FFCF'} },
              { value: 30, name: '4月' , itemStyle: {color: '#009ADF'} },
              { value: 28, name: '5月' , itemStyle: {color: '#005ABF'} },
              { value: 26, name: '6月' , itemStyle: {color: 'rgba(59,162,144,0.8)'} },
            ],
            label: {
              color: '#FFFFFF',
            },
            emphasis: {
              itemStyle: {
                shadowColor: 'rgba(0,0,0,0)'
              }
            }
          }
        ]
      },

      pillarLineCmpConfig3: {
        tooltip: {
          trigger: 'axis',
        },
        // legend: {
        //   data: ['1月', '2月', '3月', '4月', '5月', '6月']
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            color: '#FFF'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFF',
            }
          },
          axisTick: {
            show: false,
          }
      },
        yAxis: {
          type: 'value',
          min: 0,
          max: 150,
          interval: 50,
          axisLabel: {
            color: '#FFF',
            formatter: '{value} %'
          },
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [63.00, 95.00, 75.00, 80.00, 85.30, 40.60],
            itemStyle: {
              color: '#009ADF'
            },
            smooth: true,
            // 区域填充样式
            areaStyle: {
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: 'rgba(0,154,223, 0.3)' // 0% 处的颜色
                  }, {
                      offset: 1, color: 'rgba(0,154,223,0.2)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
              }
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
        ]
      },

      pillarLineCmpConfig4: {
        tooltip: {
          trigger: 'item',
          formatter: '【{b}：{c}%】',
        },
        legend: {
          show: true,
          orient: 'vertical',
          right: 10,
          y: 'center',
          data: ['FTY达成'],
          textStyle: {
              color: '#FFFFFF',
          },
        },
        angleAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],
          axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,0.7)"
            }
          },
          axisLabel: {
            color: '#FFF'
          }
        },
        radiusAxis: {
          min: 0,
          max: 150,
          interval: 50,
          axisLabel: {
            // textStyle: {
            //     color: 'rgba(255,255,255,0.7)'
            // },
            color: '#FFF'
          },
          axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.7)'
            }
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,0.7)"
            }
          }
        },
        polar: {
          center: ['45%','50%'],
          radius: [0, '65%'],
        },
        series: [
          {
            name: 'FTY达成',
            type: 'bar',
            // data: [50, 120, 140, 80, 90, 122],
            data: [
              { value: 50,name: '一月' , itemStyle: {color: 'rgba(0,229,255,0.8)'} },
              { value: 120,name: '二月' , itemStyle: {color: 'rgba(0,229,255,0.8)'} },
              { value: 140,name: '三月' , itemStyle: {color: 'rgba(0,229,255,0.8)'} },
              { value: 80,name: '四月' , itemStyle: {color: 'rgba(0,229,255,0.8)'} },
              { value: 90,name: '五月' , itemStyle: {color: 'rgba(0,229,255,0.8)'} },
              { value: 122,name: '六月' , itemStyle: {color: 'rgba(0,229,255,0.8)'} },
            ],
            
            coordinateSystem: 'polar',
            stack: 'a',
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
              color: '#00E5FF',
            },
          },
          
        ],
        
      },

      pKey1: Math.random(),
      pKey2: Math.random(),
      pKey3: Math.random(),
      pKey4: Math.random(),
    };
  },
  components: { 
    PillarLineEchartsCmp,
    SideMenu
  },
  mounted() {
    window.addEventListener("resize", this.resizeAll);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeAll);
  },
  methods: {
    resizeAll() {
      this.pKey1 = Math.random();
      this.pKey2 = Math.random();
      this.pKey3 = Math.random();
      this.pKey4 = Math.random();
    }
  },
};
</script>

<style lang="scss" scoped>
  .factory-min-container{
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;

    // .factory-min-left-menu {
    //   width: 300px;
    //   // height: 100%;
    //   color: #fff;
    //   padding-top: 30px;
    //   background-color: rgba(15, 47, 92, 0.8);
    //   overflow: auto;
    // }

    .factory-min-right-main {
      margin: 0px 20px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .factory-min-right-main-header {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: rgba($color: #005ABF, $alpha: 0.4);
        margin-bottom: 20px;
        div {
          display: flex;
          align-items: center;
          height: 48px;
          font-size: .175rem;
          font-family: HarmonyOS_Sans_SC;
          color: #FFFFFF;

          span {
            margin-left: 8px;
            color: #00E5FF;
          }
        }
      }

      .factory-min-right-main-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .factory-min-right-main-body-item {
            // width: 764px;
            // height: 360px;
            display: flex;
            width: 100%;
            height: 49%;
          }
        
      }
    }

    // .el-tree {
    //   // padding-left: 26px;
    //   background: rgba(0,0,0,0.4);
    //   color: #FFF;
    // }

    // .el-tree-node /deep/  .el-tree-node__content {
    //   margin: 5px 0px;
    //   // padding-left: 26px !important;
    // }

    // .el-tree-node__content .el-tree-node__label {
    //   font-size: 0.175rem;
    // }

    // .el-tree-node__content:hover, .el-upload-list__item:hover {
    //   background-color: #005CFF;
    // }

    // .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    //     background-color: #005CFF;
    // }
  }

    
</style>
